<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始化 state - 紫霞仙子</title>
</head>
<body>
    <div id="root"> </div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        // function fn(){
        //     console.log('fn fn fn');
        //     console.log(this);
        // }

        class App extends React.Component{
            //声明 state
            state = {
                isNight: false
            }

            //声明构造方法   在构造方法中 this 是永远指向『实例对象』
            constructor(){
                //调用父级的构造方法
                super();
                //开始修改 handleClick 的 this
                //完整写法
                // let fn = this.handleClick.bind(this);
                // this.handleClick = fn;
                //简便写法
                //3. 修改 this 的值
                this.handleClick = this.handleClick.bind(this);
            }

            //2. 声明一个方法
            handleClick(){
               console.log(this);

                //调用方法修改状态  setState 是属于实例对象的.
                this.setState({
                    isNight: !this.state.isNight
                });
            }

            render(){
                // this 在render中是指向 『实例对象』
                return <div>
                        <h1>至尊宝, 我是 {this.state.isNight ? '青霞' : '紫霞' }仙子</h1>
                        {/**1. 添加事件属性*/}
                        <button onClick={this.handleClick} >切换</button>
                    </div>;
            }
        }

        ReactDOM.render(<App />, document.querySelector("#root"));

    </script>
</body>
</html>